What is the purpose of the `Array.prototype.filter()` method?

Imagine you have a list of user objects from an API, and you need to display only the users who are marked as 'active' and are over 18. How would you write that logic using filter? What does the method return if no users match that criteria?

Suppose you have an array of products and you use filter to find products under $50. Inside the callback, you accidentally write 'product.price = 0' instead of a comparison. What happens to the original array, and what does the filtered array look like?

If you have an array containing mixed types like numbers, nulls, strings, and undefineds, how would you use filter to quickly strip out all the falsy values?

We have a search page where users filter a list of 5,000 items. The current code chains '.filter().map().filter()'. Users are reporting UI lag on mobile devices when typing in the search box. How would you diagnose this, and how might you refactor this chain to improve performance?

In a React component, a developer is filtering a list of items from the state and rendering them. However, they noticed that sometimes the original state seems to get mutated, or the component isn't re-rendering when the filter changes. What are some common pitfalls with Array.prototype.filter regarding object references that could cause this?

We are processing a 500MB JSON payload containing transaction logs in a Node.js microservice. If we use Array.prototype.filter() to extract suspicious transactions, we risk running out of memory due to garbage collection spikes. How would you handle this filtering process efficiently without loading the entire array into memory at once?

You are building a reusable data-table component for an enterprise design system. The table needs to support complex, multi-column filtering (e.g., 'status is active AND (price > 100 OR category is electronics)'). How would you design the filtering engine and the predicate functions so that they are highly performant and easy for other developers to extend?

In our large-scale frontend application, we have multiple teams writing redundant filtering logic over the same global state, leading to massive CPU overhead and redundant array allocations on every frame. How would you architect a centralized, reactive data-querying layer (perhaps using memoization, selectors, or lazy evaluation) to standardize and optimize how we filter and transform collections across the entire app?

We are migrating a legacy codebase that heavily relies on custom utility libraries (like Lodash) for collection manipulation to modern ES6+. Some teams are blindly replacing _.filter with native Array.prototype.filter(), which has caused subtle bugs with null-checks and performance regressions on older mobile browsers. What guidelines, lint rules, or architectural wrappers would you put in place to ensure a safe and performant migration?